<template>

	<view class="container">
		<!-- 公告跳转小喇叭 -->
		<uni-notice-bar show-icon scrollable show-close single
			text="wkl即将发布属于自己的APP! 据悉将使用代码大师,同时也是围棋宗师的'DarkNightvip'的后端API接口,从而实现一系列功能,目前仅展示留言板和公告.更多功能抢先体验,请访问https://ui.huhuiyu.top"
			@click="toPage('/pages/notice/notice')" />

		<!-- 排序导航栏 -->
		<uni-segmented-control :current="order" :values="orders" @clickItem="changeOrder"></uni-segmented-control>

		<!-- 内容遍历的区域块 -->
		<view class="content" v-for="d in list">

			<!-- 发帖人的头像和昵称 -->
			<view style="position: relative; display: flex; justify-content: center; align-items: center;">
				<image class="praised" :src="tools.userlogo(d.uid)"></image>
				<text>{{d.user.tbUserInfo.nickname }} </text>
			</view>

			<!-- 帖子的标题 -->
			<view @click="showDetail(d.mid)">
				{{d.title}}
			</view>

			<!-- 下方栏 点击量 回复量 点赞量 -->
			<view style="display: flex; justify-content: end;">

				<!-- 发布时间 -->
				<view class="xialan1">
					<text class="shuzi">{{tools.formatDate(d.lastupdate)}}</text>
				</view>

				<!-- 点击量 -->
				<view class="xialan">
					<image class="praised" :src="pics.dianji">
					</image>
					<text class="shuzi"> {{d.hits}}</text>
				</view>

				<!-- 回复量 -->
				<view class="xialan">
					<image class="praised" :src="pics.huifu">
					</image>
					<text class="shuzi"> {{d.reply}}</text>
				</view>

				<!-- 点赞量 -->
				<view class="xialan">
					<image class="praised" @click="praise(d)" v-if="d.exInfo.praised" :src="pics.dianzan1">
					</image>
					<image class="praised" @click="praise(d)" v-if="!d.exInfo.praised" :src="pics.dianzan">
					</image>
					<text class="shuzi"> {{d.praise}}</text>
				</view>
			</view>

		</view>

		<!-- 加载更多 -->
		<uni-load-more :status="more" :content-text="moreText" @clickLoadMore="loadMore"></uni-load-more>

		<!-- 刷新重查 -->
		<image @click="requery" class="sx" :src="pics.sx"></image>

		<!-- 到底啦别滑了 -->
		<image :src="pics.daodi" style="width: 100%;"></image>

	</view>
</template>

<script setup>
	const toPage = (page) => {
		uni.navigateTo({
			url: page
		})
	}
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		api,
		tools
	} from '../../api/api.js'

	// url图片
	import {
		storeToRefs
	} from 'pinia'
	import logosStore from '@/store/logos.js'

	const {
		pics
	} = storeToRefs(logosStore())


	const info = ref('')
	const page = ref({
		pageSize: 10,
		pageNumber: 1
	})

	const more = ref('more')
	const moreText = ref({
		contentdown: "点击加载更多",
		contentrefresh: "正在加载中...",
		contentnomore: "我是有底线的"
	})

	const requery = () => {
		page.value.pageNumber = 1
		list.value = []
		query()
	}

	const showDetail = (id) => {
		uni.navigateTo({
			url: `/pages/index/detail?mid=${id}`,
		})
	}

	const order = ref(0)
	const orders = ref(['最新发布', '最高点赞', '最多热评', '最高热度'])

	const changeOrder = (event) => {
		page.value.pageNumber = 1
		order.value = event.currentIndex
		list.value = []
		query()
	}

	const list = ref([])

	const logoinfo = ref([])

	const loadMore = () => {
		page.value.pageNumber++;
		if (page.value.pageNumber > page.value.pageCount) {
			more.value = 'noMore'
			return
		}
		query()
	}

	const query = () => {
		more.value = 'loading'
		api.get(`/message/${page.value.pageSize}/${page.value.pageNumber}/${order.value + 1}`, {}, (data) => {
			if (data.success) {
				more.value = 'more'
				list.value = [...list.value, ...data.data.data];
				page.value = data.data.pageBean
				return
			}
			uni.showModal({
				content: data.message
			})
		});
	}


	const praise = (info) => {
		uni.showLoading({
			title: '点赞处理中……'
		})
		api.post(`/message/praise/${info.mid}`, {}, (data) => {
			uni.hideLoading()
			if (data.success) {
				info.exInfo.praised = !info.exInfo.praised
				info.exInfo.praised ? info.praise++ : info.praise--
				return
			}
			uni.showToast({
				content: data.message
			})
		})
	}


	onLoad(() => {
		query()
	})
</script>

<style scoped>
	.container {
		padding: 3%;
		position: absolute;
		left: 0;
		right: 0;
		top: 0%;
		bottom: 0;
	}

	.active {
		color: #ff0000;
	}

	.praised {
		margin-right: 2%;
		width: 25px;
		height: 25px;
	}

	.sx {
		position: fixed;
		bottom: 20px;
		right: 10px;
		width: 40px;
		height: 40px;
		cursor: pointer;
		z-index: 1000;
		margin-bottom: 10%;
		width: 40px;
		height: 40px;
	}

	.xialan {
		display: flex;
		flex-direction: column;
		margin-right: 5%;
		margin-top: 10%;
	}

	.xialan1 {
		margin-right: 30%;
		margin-top: 10%;
	}

	.shuzi {
		font-size: 1%;
	}

	.content {
		font-family: 'Arial', sans-serif;
		font-size: 16px;
		color: #333;
		margin: 10px;
		padding: 10px;
		background-color: #f9f9f9;
		border-radius: 25px;
		word-wrap: break-word;
		max-width: 800px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		margin-top: 5%;
	}
</style>